<template>
  <div class="comment" style="width:80%; margin:0 auto; height:100%;">
    <div style="height: 20px"></div>
    <div style=" line-height:30px; height:30px; border-left:5px solid #2caf2c; font-size:25px;
            font-weight:bold; padding-left:5px; margin:20px 20px">我的评论</div>
    <div style="height:3px; background-color:green; margin-bottom:10px"></div>
    <div class="card" style=" background-color:#d8e3db; margin-top:5px;" v-for="item in data.commentData" :key="item">
      <div style="display:flex;">
        <div style="margin-top:20px;">
          <span>评论人：</span>
          {{item.userName}}
        </div>
        <div style="margin-top:20px; margin-left:90%">
          <el-button type="danger" icon="Delete" @click="del(item.id)"></el-button>
        </div>
      </div>
      <div style="margin-top:20px;">
        <span>评论时间：</span>
        {{item.time}}
      </div>
      <div style="margin-top:20px;">
        <span>评论内容：</span>
        {{item.content}}
      </div>
    </div>
  </div>
</template>

<script setup>


import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
})

const loadComment = () => {
  request.get(`/comment/selectByUserId/${data.user.id}`).then(res => {
    if (res.code === '200') {
      data.commentData = res.data;
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadComment()

const del = (id) => {
  ElMessageBox.confirm('删除后无法恢复，您确认吗？', '删除确认窗口', {type: 'warning',})
      .then(res => {
        request.delete(`/comment/delete/${id}`).then((res) => {
          if (res.code === '200') {
            ElMessage.success('删除成功');
            loadComments()
          } else {
            ElMessage.error(res.msg);
          }
        })
      }).catch(err => {})
}

</script>

<style scoped>
.card{
  background-color: #ffffff;
}
</style>